<template>

  <div>
    <el-button type="primary" icon="el-icon-back" @click="$router.back()" size="small">上一页</el-button>
    <div><br /></div>
    <div id="xlsxChart"></div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import XLSX from "xlsx";  //引入xlsx
  export default {
    data() {
      return {
        databar:'',
      }
    },


    /* created() {
      this.getDetailsList()
    }, */


    /* 接收groupIdex传来的参数 */
    mounted(){
      this.databar = this.$route.query.b
      this.updateChart()
    },

    methods:{
      //初始化echartInstance对象
      initChart(){
        this.myChart = echarts.init(document.getElementById('xlsxChart'));
      },
      //获取数据
      getData(){},
      //更新图标
      updateChart(){
        const ha = this.databar.colHeaders
        const sellerName = this.databar.data.map((item) =>{
          return item.A
        })
        console.log("sellerName",sellerName)
        const sellerValue = this.databar.data.map((item) =>{
          return item.B
        })
        const sellerValue1 = this.databar.data.map((item) =>{
          return item.C
        })
        const sellerValue2 = this.databar.data.map((item) =>{
          return item.D
        })
        const sellerValue3 = this.databar.data.map((item) =>{
          return item.E
        })
        const sellerValue4 = this.databar.data.map((item) =>{
          return item.F
        })
        const sellerValue5 = this.databar.data.map((item) =>{
          return item.G
        })
        const sellerValue6 = this.databar.data.map((item) =>{
          return item.H
        })
        const option = {
          title: {
            text: '树图'
          },

          toolbox: {
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          tooltip: {trigger: 'item',
            triggerOn: 'mousemove'},
          legend: {},
          calculable : false,
          series: [
            {
              type:'tree',
              top: '1%',
              left: '7%',
              bottom: '1%',
              right: '20%',
              symbolSize: 7,
              label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 13
              },

              leaves: {
                label: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left'
                }
              },
              expandAndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750,
              data:[
                {name:' ',
                  children: [{
                    name: sellerName[0],
                    children:[
                      {name:ha[1], value:sellerValue[0]},
                      {name:ha[2], value:sellerValue1[0]},
                      {name:ha[3],value:sellerValue2[0]},
                      {name:ha[4],value:sellerValue3[0]},
                      {name:ha[5],value:sellerValue4[0]},
                      {name:ha[6],value:sellerValue5[0]},
                    ]

                  }, {
                    name: sellerName[1],
                    children:[
                      {name:ha[1], value:sellerValue[1]},
                      {name:ha[2], value:sellerValue1[1]},
                      {name:ha[3],value:sellerValue2[1]},
                      {name:ha[4],value:sellerValue3[1]},
                      {name:ha[5],value:sellerValue4[1]},
                      {name:ha[6],value:sellerValue5[1]},
                    ]
                  },
                    {
                      name: sellerName[2],
                      children:[
                        {name:ha[1], value:sellerValue[2]},
                        {name:ha[2], value:sellerValue1[2]},
                        {name:ha[3],value:sellerValue2[2]},
                        {name:ha[4],value:sellerValue3[2]},
                        {name:ha[5],value:sellerValue4[2]},
                        {name:ha[6],value:sellerValue5[2]},
                      ]
                    },
                    {
                      name: sellerName[3],
                      children:[
                        {name:ha[1], value:sellerValue[3]},
                        {name:ha[2], value:sellerValue1[3]},
                        {name:ha[3],value:sellerValue2[3]},
                        {name:ha[4],value:sellerValue3[3]},
                        {name:ha[5],value:sellerValue4[3]},
                        {name:ha[6],value:sellerValue5[3]},
                      ]
                    },
                    {
                      name: sellerName[4],
                      children:[
                        {name:ha[1], value:sellerValue[4]},
                        {name:ha[2], value:sellerValue1[4]},
                        {name:ha[3],value:sellerValue2[4]},
                        {name:ha[4],value:sellerValue3[4]},
                        {name:ha[5],value:sellerValue4[4]},
                        {name:ha[6],value:sellerValue5[4]},
                      ]
                    },
                    {
                      name: sellerName[5],
                      children:[
                        {name:ha[1], value:sellerValue[5]},
                        {name:ha[2], value:sellerValue1[5]},
                        {name:ha[3],value:sellerValue2[5]},
                        {name:ha[4],value:sellerValue3[5]},
                        {name:ha[5],value:sellerValue4[5]},
                        {name:ha[6],value:sellerValue5[5]},
                      ]
                    },
                    {
                      name: sellerName[6],
                      children:[
                        {name:ha[1], value:sellerValue[6]},
                        {name:ha[2], value:sellerValue1[6]},
                        {name:ha[3],value:sellerValue2[6]},
                        {name:ha[4],value:sellerValue3[6]},
                        {name:ha[5],value:sellerValue4[6]},
                        {name:ha[6],value:sellerValue5[6]},
                      ]
                    },
                    {
                      name: sellerName[7],
                      children:[
                        {name:ha[1], value:sellerValue[7]},
                        {name:ha[2], value:sellerValue1[7]},
                        {name:ha[3],value:sellerValue2[7]},
                        {name:ha[4],value:sellerValue3[7]},
                        {name:ha[5],value:sellerValue4[7]},
                        {name:ha[6],value:sellerValue5[7]},
                      ]
                    },
                    {
                      name: sellerName[8],
                      children:[
                        {name:ha[1], value:sellerValue[8]},
                        {name:ha[2], value:sellerValue1[8]},
                        {name:ha[3],value:sellerValue2[8]},
                        {name:ha[4],value:sellerValue3[8]},
                        {name:ha[5],value:sellerValue4[8]},
                        {name:ha[6],value:sellerValue5[8]},
                      ]
                    },
                    {
                      name: sellerName[9],
                      children:[
                        {name:ha[1], value:sellerValue[9]},
                        {name:ha[2], value:sellerValue1[9]},
                        {name:ha[3],value:sellerValue2[9]},
                        {name:ha[4],value:sellerValue3[9]},
                        {name:ha[5],value:sellerValue4[9]},
                        {name:ha[6],value:sellerValue5[9]},
                      ]
                    },
                    {
                      name: sellerName[10],
                      children:[
                        {name:ha[1], value:sellerValue[10]},
                        {name:ha[2], value:sellerValue1[10]},
                        {name:ha[3],value:sellerValue2[10]},
                        {name:ha[4],value:sellerValue3[10]},
                        {name:ha[5],value:sellerValue4[10]},
                        {name:ha[6],value:sellerValue5[10]},
                      ]
                    },
                    {
                      name: sellerName[11],
                      children:[
                        {name:ha[1], value:sellerValue[11]},
                        {name:ha[2], value:sellerValue1[11]},
                        {name:ha[3],value:sellerValue2[11]},
                        {name:ha[4],value:sellerValue3[11]},
                        {name:ha[5],value:sellerValue4[11]},
                        {name:ha[6],value:sellerValue5[11]},
                      ]
                    },
                    {
                      name: sellerName[12],
                      children:[
                        {name:ha[1], value:sellerValue[12]},
                        {name:ha[2], value:sellerValue1[12]},
                        {name:ha[3],value:sellerValue2[12]},
                        {name:ha[4],value:sellerValue3[12]},
                        {name:ha[5],value:sellerValue4[12]},
                        {name:ha[6],value:sellerValue5[12]},
                      ]
                    },
                    {
                      name: sellerName[13],
                      children:[
                        {name:ha[1], value:sellerValue[13]},
                        {name:ha[2], value:sellerValue1[13]},
                        {name:ha[3],value:sellerValue2[13]},
                        {name:ha[4],value:sellerValue3[13]},
                        {name:ha[5],value:sellerValue4[13]},
                        {name:ha[6],value:sellerValue5[13]},
                      ]
                    },

                  ]
                },

              ]
            }
          ]
        }
        let myChart = echarts.init(document.getElementById('xlsxChart'));
        myChart.setOption(option)
      },

    }

  }
</script>

<style>
  #xlsxChart{
    height: 1200px;
    width: 1300px;
  }
</style>
